<!DOCTYPE html>
<html>
<head>
    <title>Circular Motion Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Center and dimensions
        const cx = canvas.width / 2;
        const cy = 200;
        const diskRx = 160;
        const diskRy = 50;
        const diskThickness = 25;

        // --- Draw the Turntable (Disk) ---
        // Side face
        ctx.beginPath();
        ctx.moveTo(cx - diskRx, cy);
        ctx.lineTo(cx - diskRx, cy + diskThickness);
        ctx.ellipse(cx, cy + diskThickness, diskRx, diskRy, 0, Math.PI, 2 * Math.PI);
        ctx.lineTo(cx + diskRx, cy);
        ctx.strokeStyle = '#333';
        ctx.lineWidth = 1.5;
        ctx.stroke();
        ctx.fillStyle = '#C0C0C0'; // Medium gray for side
        ctx.fill();

        // Top face
        ctx.beginPath();
        ctx.ellipse(cx, cy, diskRx, diskRy, 0, 0, 2 * Math.PI);
        ctx.fillStyle = '#E0E0E0'; // Light gray for top
        ctx.fill();

        // Texture on top face (to match original)
        ctx.save();
        ctx.beginPath();
        ctx.ellipse(cx, cy, diskRx, diskRy, 0, 0, 2 * Math.PI);
        ctx.clip();
        ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.lineWidth = 1;
        for (let i = 0; i < 4000; i++) {
            const x = cx - diskRx + Math.random() * diskRx * 2;
            const y = cy - diskRy + Math.random() * diskRy * 2;
            ctx.fillRect(x, y, 1, 1);
        }
        ctx.restore();
        
        // Top face outline
        ctx.beginPath();
        ctx.ellipse(cx, cy, diskRx, diskRy, 0, 0, 2 * Math.PI);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.stroke();

        // --- Draw the Rotation Axis ---
        ctx.beginPath();
        ctx.moveTo(cx, cy - 130);
        ctx.lineTo(cx, cy + diskThickness + 100);
        ctx.lineWidth = 1.5;
        ctx.stroke();

        // --- Draw Rotation Arrow and Label (ω) ---
        const arrowRadius = 18;
        const arrowCenterY = cy - 100;
        ctx.beginPath();
        ctx.arc(cx, arrowCenterY, arrowRadius, -Math.PI * 0.8, Math.PI * 0.3);
        ctx.stroke();
        
        // Arrowhead
        const arrowAngle = Math.PI * 0.3;
        const arrowX = cx + arrowRadius * Math.cos(arrowAngle);
        const arrowY = arrowCenterY + arrowRadius * Math.sin(arrowAngle);
        ctx.beginPath();
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(arrowX - 8, arrowY - 4);
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(arrowX + 1, arrowY - 9);
        ctx.stroke();

        // ω Label
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.fillStyle = 'black';
        ctx.fillText('ω', cx + arrowRadius + 12, arrowCenterY + 8);

        // --- Draw Masses, Line, and Labels ---
        const r1 = 70;
        const r2 = 130;
        const massRadius = 6;
        
        // Center point
        ctx.beginPath();
        ctx.arc(cx, cy, 2.5, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();

        // Connecting line
        ctx.beginPath();
        ctx.moveTo(cx - r1, cy);
        ctx.lineTo(cx + r2, cy);
        ctx.lineWidth = 1.5;
        ctx.stroke();

        // Mass m1
        ctx.beginPath();
        ctx.arc(cx - r1, cy, massRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Mass m2
        ctx.beginPath();
        ctx.arc(cx + r2, cy, massRadius, 0, 2 * Math.PI);
        ctx.fill();
        
        // --- Labels ---
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // m1 label
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('m', cx - r1 - 5, cy - massRadius - 12);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText('1', cx - r1 + 5, cy - massRadius - 8);

        // m2 label
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('m', cx + r2 - 5, cy - massRadius - 12);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText('2', cx + r2 + 5, cy - massRadius - 8);

        // r1 label
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('r', cx - r1 / 2 - 4, cy + 20);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText('1', cx - r1 / 2 + 5, cy + 24);

        // r2 label
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('r', cx + r2 / 2 - 4, cy + 20);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText('2', cx + r2 / 2 + 5, cy + 24);

        // --- Bottom Text ---
        ctx.font = '22px "SimSun"'; // A common font for Chinese characters
        ctx.fillText('习题 1-34 图', cx, canvas.height - 30);
    </script>
</body>
</html>